<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            border: 1px solid #000;
            height: 500px;
        }
        .box .item{
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            box-sizing: border-box;
            float: left;
            border: 1px solid #000;
        }
        .box .show{
            width: 300px;
            height: 100px;
            float: left;
            border:1px solid #000;
            text-align: center;
            line-height: 100px;
            box-sizing: border-box;
        }
        .box .selected{
            background: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item">1月</div>
        <div class="item">2月</div>
        <div class="item">3月</div>
        <div class="item">4月</div>
        <div class="item">5月</div>
        <div class="item">6月</div>
        <div class="item">7月</div>
        <div class="item">8月</div>
        <div class="item">9月</div>
        <div class="item">10月</div>
        <div class="item">11月</div>
        <div class="item">12月</div>
        <div class="show">你好,1月</div>
    </div>
    <script>
        var oItems=document.querySelectorAll(".item");
        var oShow=document.querySelector(".show");
        for(var i=0;i<oItems.length;i++){
            oItems[i].aIndex=i;
            oItems[i].onclick=function(){
                for(var j=0;j<oItems.length;j++){
                    oItems[j].className="item";
                }
                this.className="item selected";
                oShow.innerHTML=`你好,${this.aIndex+1}月`;
            }
        }
    </script>
</body>
</html>